<template>
  <div>
    <common-menu :to-path="['tagPublish','tagList']" :flag="1" :text="['新增','列表']"></common-menu>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="my-padded-tb-large">
      <div class="ui container">
        <div class="ui segment form">
          <div :class="errorClass + ' field'">
            <div class="ui left labeled input">
              <label class="ui blue basic label">名称</label>
              <input type="text" name="name" v-model="tag.name" placeholder="标签名称">
            </div>
          </div>
          <!--button-->
          <div class="ui right aligned container">
            <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
            <button @click="saveTag($route.params.flag,$route.params.page)" class="ui blue button">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import CommonMenu from "../../components/CommonMenu";
  import {getTagByName, saveTag, updateTag} from "../../api/tag";
  export default {
    name: "TagPublish",
    components: {CommonMenu},
    data() {
      return {
        tag: {},
        oldTagName: '',
        errorClass: ''
      }
    },
    activated() {
      if (this.$route.params.tag !== undefined) {
        this.tag = this.$route.params.tag
        this.oldTagName = this.$route.params.tag.name
      } else {
        this.tag = {}
      }
      this.errorClass = ''
    },
    methods: {
      saveTag(flag,page) {
        // 无输入
        if (this.tag.name === undefined || this.tag.name === '') {
          this.$message({
            message: "请输入标签名称",
            type: 'error',
          })
          this.errorClass = 'error'
          return
        }
        // 未做修改
        if (flag === 0 && this.tag.name === this.oldTagName) {
          this.$message({
            message: "未作修改",
            type: 'error',
          })
          return
        }
        // 判断改标签是否已存在
        let isExist = false
        getTagByName(this.tag.name).then(res => {
          if (res.code == 200 && res.data !== null) {
            isExist = true
          }
        })
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确认' + (flag===0?'修改 ':'新增 ')),
            h('strong', { style: 'color: teal' }, this.tag.name),
            h('span', null, ' 标签吗 '),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
                if (isExist) {
                  this.$message({
                    message: "改标签已存在",
                    type: "error"
                  })
                  return
                }
                // 0编辑 1新增
                if (flag===0) {
                  let data = {
                    id: this.tag.id,
                    name: this.tag.name
                  }
                  updateTag(data).then(res => {
                    if (res.code === 200) {
                      this.$message({
                        message: "更新成功",
                        type: 'success',
                      })
                    } else {
                      return Promise.reject('error');
                    }
                  })
                } else {
                  let data = {
                    name: this.tag.name
                  }
                  saveTag(data).then(res => {
                    if (res.code === 200) {
                      this.$message({
                        message: "添加成功",
                        type: 'success',
                      })
                    } else {
                      return Promise.reject('error');
                    }
                  })
                }
                setTimeout(() => {
                  if (flag === 0) {
                    this.$router.push({name: 'Tag',query:{flag:flag,page:page}})
                  } else {
                    this.$router.push({name: 'Tag',query:{flag:flag}})
                  }
                }, 1000)
              }, 3000);
            } else {
              done();
            }
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
